<template>
  <el-container class="layout-container-demo" style="height: 650px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Menu />
              </el-icon>
              <RouterLink to="/home" class="router-link">首页</RouterLink>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/home/file" class="router-link">我的文件</router-link>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/home/share" class="router-link">我的分享</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- 菜单栏的第一级菜单 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Delete />
              </el-icon>回收站
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <router-link to="/home/recycle" class="router-link">回收站</router-link>
              </el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>
          <!-- <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">设置1</el-menu-item>
              <el-menu-item index="3-2">设置2</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu> -->
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <!--侧边栏 -->
    <el-container class="top-container">
      <!-- 顶部导航栏 -->
      <el-header style="text-align: right; font-size: 12px" class="top-header">
        <div class="toolbar">
          <el-dropdown>
            <el-row>
              <el-col :span="12">
                <!-- 头像 -->
                <div class="demo-basic--circle">
                  <div class="block">
                    <el-avatar :size="50" :src="state.circleUrl" />
                  </div>
                </div>
              </el-col>
            </el-row>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 头像菜单栏 -->
                <el-dropdown-item @click="visible = true">个人主页</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>

          </el-dropdown>
          <span>{{ userId }}</span>
        </div>
        <!-- <div class="top-shadow"></div> 添加阴影容器 -->
      </el-header>
      <!-- 主体内容 -->
      <el-main>
        <el-scrollbar>
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>
    <!-- 点击个人主页跳出弹框 -->
    <el-drawer v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">欢迎{{ userId }}!</h4>
        <!-- 关闭按钮 -->
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left">
            <CircleCloseFilled />
          </el-icon>
          Close
        </el-button>
      </template>
      <!-- 弹框主要内容   点击修改头像-->
      <el-upload class="demouser-basic--circle" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="blockuser"
          style="width: 100px; height: 100px; border-radius: 50%;" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      <!-- 用户设置  需要什么功能再添加修改框-->
      <div class="user-settings">
        <el-row>
          <el-col :span="24">
            <div class="setting-item">
              <span>绑定手机号</span>
              <el-input v-model="user.phone" style="height: 25px; width: 200px" placeholder="Please input" />
            </div>
            <div class="setting-item">
              <span>登录密码</span>
              <el-input v-model="user.password" style="height: 25px; width: 200px" placeholder="Please input" />
            </div>
            <div class="setting-item">
              <span>绑定邮箱</span>
              <el-input v-model="user.email" style="height: 25px; width: 200px" placeholder="Please input" />
            </div>
            <div class="setting-item">
              <span>账号保护</span>
              <span class="setting-value">已开启 4 项</span>
            </div>
            <div class="setting-item">
              <span>登录方式</span>
              <span class="setting-value">去开启</span>
            </div>
            <div class="setting-item">
              <span>登录设备</span>
              <span class="setting-value">可移除登录设备</span>
            </div>
            <div class="setting-item">
              <span>权限管理</span>
              <span class="setting-value">去管理</span>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-drawer>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { Menu as IconMenu, Message, Setting, CircleCloseFilled } from '@element-plus/icons-vue'
// 从 localStorage 中获取 token 并解析 userId
const token = localStorage.getItem("token");
let userId = 0;

// 假设解析 token 的逻辑
if (token) {
  try {
    const parsedToken = JSON.parse(atob(token.split(".")[1])); // 假设 token 是 JWT 格式
    userId = parsedToken.userId || 0;
  } catch (error) {
    console.error("Token 解析失败:", error);
    userId = 1; // 如果解析失败，设置为 0 或其他默认值
  }
} else {
  userId = 2; // 假设没有 token，手动设置一个假 userId
}

// 导航栏头像
const state = reactive({
  circleUrl:
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA?rs=1&pid=ImgDetMain',
  sizeList: ['small', '', 'large'] as const,
})
const visible = ref(false)

// 头像上传
const imageUrl = ref('https://tse1-mm.cn.bing.net/th/id/OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA?rs=1&pid=ImgDetMain')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
//  上传前的预处理操作
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
// 用户信息
const user = reactive({
  phone: '176****52',
  password: '******',
  email: 'admin@123.com',
})
</script>


<style scoped>
/* 定义布局容器演示的样式 */
/* .layout-container-demo .el-header {
  /* background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary); */
/* }  */
.top-container .top-header {
  color: #333;
  background: white;
  /* 确保导航条背景是白色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  padding: 10px 20px;
  /* 为顶部导航条添加内边距 */
  position: relative;
  /* 设置为相对定位以允许子元素绝对定位 */
  z-index: 10;
  /* 确保导航条在其他元素之上 */
}

/* 定义侧边栏的样式 */
/* .layout-container-demo .el-aside { */
/* color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8); */
/* } */

/* 定义菜单的样式 */
.layout-container-demo .el-menu {
  border-right: none;
  border-right: 1px solid #f1f2f4;
  height: 650px;
}

/* 定义主内容的样式 */
.layout-container-demo .el-main {
  padding: 0;
}

/* 定义工具栏的样式 */
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;

}

/* 菜单栏取消下划线 */
.layout-container-demo .router-link {
  /* 取消下划线 */
  text-decoration: none;
  color: black;

}

/* 弹框内头像设置 */
.demouser-basic--circle {
  /* div居中 */
  display: flex;
  /* div水平居中 */
  justify-content: center;
  /* 垂直居中 */
  /* align-items: center; */

}

/* 用户css设置 */
.user-settings {
  padding: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.setting-value {
  color: #409eef;
}
.el-dialog .el-dialog__body {
  padding: 40px;
}
</style>
